<template>
  <div id="evalute">
    <!-- 无商品的展示图片 -->
    <img src="../../../assets/nullIcon/icon_null.png" alt="" class="no-data" v-if="evalutes.length == 0">
    <!-- 展示商品的评价 -->
  	<div class="mb34" v-for="evalute in evalutes">
      <evalute :evalute="evalute"></evalute>
    </div>
    <!-- 分页组件 -->
    <w-paging v-show="totalPage > 1" :total="totalPage" :current="currentPage" @on-page="onPage"></w-paging>
  </div>
</template>

<script>
// 导入评价单个组件
import evalute from '../components/Evalute'

// 获取接口对象
import { apiCommentOrderForm } from '../../../common/api'

export default {
  components: {
    evalute
  },
  props: {
    id: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      currentPage: 1,
      totalPage: 1,
      pageSize: 10,
      goodsId: this.$route.params.id,
      evalutes: []
    }
  },
  created() {
    this.handlerCommentOrderForm()
  },
  methods: {
    /**
     * 获取商品评价记录
     */
    handlerCommentOrderForm() {
      // 请求商品成交记录
      apiCommentOrderForm(this.goodsId, '', this.currentPage, this.pageSize).then((data) => {
        this.evalutes = data.evaluateList
        this.currentPage = Number(data.currentPage)
        this.totalPage = Number(data.totalPageCount)

        // 获取尺寸
        this.$emit('size', data.allCount)
      })
    },
     // 点击下一页
    onPage(index) {
      this.currentPage = index
      this.handlerCommentOrderForm()
    }
  }
}
</script>

<style lang="scss" scoped>
.mb34 {
  margin-bottom: 34px;
}
.no-data {
  width: auto;
  margin: 10px auto;
}
</style>